<template>
  <div class="filter-input" :class="config.filter.type" :style="{ width: config.filter.inputWidth }">
    <template v-if="config.filter.type === 'select' && config.filter.schema">
      <schema-select
        v-model="filterValue"
        :schema="config.filter.schema"
        style="width: 100%"
        @change="setValue"
        :filterable='true'
      >
      </schema-select>
    </template>
    <template v-else-if="config.filter.type === 'async-select'">
      <async-select v-model="filterValue" :has-default-value="config.filter.hasDefaultValue" :filterable="config.filter.filterable" :placeholder="config.filter.placeholder" :clearable="config.filter.clearable" :default-dropdown-options="config.filter.options" :option-mapping="config.filter.optionMapping" :api-params="config.filter.apiParams" :api="config.filter.api" :field-name="prop" :dependencies="config.filter.dependencies" @change="setValue"></async-select>
    </template>
    <template v-else-if="config.filter.type === 'citys'">
      <CitySelect
        placeholder="请选择"
        style="width: 100%"
        v-model="filterValue"
        @change="setValue"
      >
      </CitySelect>
    </template>
    <template
       v-else-if="config.filter.type === 'tree-select' && config.filter.remote"
     >
       <tree-select
         v-model="filterValue"
         :options="selectOptions[config.filter.remote.list + '-tree']"
         :props="{
           label: config.filter.remote.label,
           value: config.filter.remote.value,
         }"
         @change="setValue"
       ></tree-select>
     </template>
     <template v-else-if="config.filter.type === 'select' && config.filter.options">
      <el-select
        v-model="filterValue"
        :placeholder="config.placeholder"
        @change="setValue"
        :clearable="config.filter.clearable"
      >
        <el-option
          v-for="op in config.filter.options"
          :key="op.value"
          :label="op.label"
          :value="op.value"
        />
      </el-select>
    </template>
    <template v-else-if="config.filter.type === 'select' && config.filter.remote">
      <el-select
        v-model="filterValue"
        :placeholder="config.placeholder"
        @change="setValue"
        :filterable='true'
        :clearable="config.filter.clearable"
      >
        <el-option
          v-for="op in (config.filter||{}).condition?selectOptions[config.filter.remote.list].filter(config.filter.condition):selectOptions[config.filter.remote.list]"
          :key="op.key"
          :label="op[config.filter.remote.label]"
          :value="op[config.filter.remote.value]"
        />
      </el-select>
    </template>
    <template v-else-if="config.filter.type === 'select'">
      <dict-select v-model="filterValue"
              :dict-key="config.filter.dictKey || config.dictKey"
              style="width: 100%"
              @change="setValue"></dict-select>
    </template>
    <template v-else-if="config.filter.type === 'date-picker'">
      <el-date-picker
          v-model="filterValue"
          :type="config.filter.pickerType"
          :clearable="false"
          :disabled="!!config.filter.disabled"
          style="width: 100%"
          value-format="yyyy-M-d"
          range-separator="~"
          placeholder="选择日期"
          start-placeholder="起始日期"
          end-placeholder="终止日期"
          @change="setValue"></el-date-picker>
    </template>
    <template v-else>
      <el-input v-model="filterValue"
                :type="config.filter.type"
                :placeholder="config.filter.placeholder"
                :disabled="!!config.filter.disabled"
                style="width: 100%"
                @change="setValue"></el-input>
    </template>
  </div>
</template>

<script>
import AsyncSelect from "@/components/AsyncSelect";
import DictSelect from '@/components/DictSelect'
import SchemaSelect from "@/components/SchemaSelect";
import CitySelect from "@/components/CitySelect";
import TreeSelect from "@/components/TreeSelect";
export default {
  name: "FilterInput",
  components: { DictSelect,SchemaSelect,CitySelect,TreeSelect,AsyncSelect, },
  inject: {
    selectOptionsGenerator: {value: "selectOptionsGenerator", default: {}}, // 修复console报错injection not found
  },
  props: {
    value: {
      type: [String, Number, Boolean, Array],
      default: ''
    },
    //列数据，需要读取数据字典类型及filter本身参数
    config: {
      type: Object,
      required: true
    },
    //对应ajax参数，进返回数据时使用
    prop: {
      type: String,
      default: ''
    }
  },
  created(){
  },
  data(){
    return {
    }
  },
  computed:{
    filterValue:{
      get(){
        return this.value;
      },
      set(val){
        this.$emit('input', val)
      }
    },
    selectOptions() {
      if(!this.selectOptionsGenerator) return {}
      return this.selectOptionsGenerator();
    },
  },
  watch:{
  },
  methods: {
    setValue(val){
      let v = this.config.filter.encode? encodeURIComponent(val): val;
      this.$emit('change', {key: this.config.filter.prop || this.prop, val: v});
    }
  }
}
</script>

<style scoped lang="scss">
  .filter-input{
    display: inline-block;
    flex: 1;
  }
</style>
<style lang="scss" scoped>
  .filter-input{
    .el-date-editor.el-range-editor{
        .el-range__icon, .el-range__close-icon{
          display: none;
        }
        .el-range-separator{
          width: 8%;
          padding: 0 3px;
        }
        .el-range-input{
          width: 46%
        }
    }
  }
  .el-theme1 .el-select,
  .el-theme2 .el-select {
    width: 100%;
  }
</style>
